<template>
  <div class="container">
    <!-- 热门歌手 -->
    <div class="artist-section">
      <MusicApp>
      <template v-slot:title>
        <h2 class="main-title">热门歌手</h2>
      </template>
      <template #top>
        <div class="artist-container">
            <div class="artist-item"
            v-for="(item, index) in artists" 
        :key="index">
            <img 
              :src="item.picUrl" 
              class="artist-image"
              :alt="item.name"
            >
            <h3 class="artist-name">{{ item.name }}</h3>
          </div>


        </div>
          
        </template>
      </MusicApp>
    </div>

    <!-- 榜单 -->
    <div class="rankings">
      <MusicApp
        :title="newSongs.name"
        :description="newSongs.description"
        :cover="newSongs.coverImgUrl"
        :items="newSongs.tracks"
        :show-images="true">
        <template v-slot:title>
        <h2 class="main-title">{{newSongs.name}}</h2>
      </template>
      </MusicApp>
     

      <MusicApp
        :description="hotSongs.description"
        :cover="hotSongs.coverImgUrl"
        :items="hotSongs.tracks"
        :show-images="true"
      >
      <template v-slot:title>
        <h2 class="main-title">{{hotSongs.name}}</h2>
      </template>
    </MusicApp>

      <MusicApp
        :description="originalSongs.description"
        :cover="originalSongs.coverImgUrl"
        :items="originalSongs.tracks"
        :show-images="true">
         <template v-slot:title>
        <h2 class="main-title">{{originalSongs.name}}</h2>
      </template>
      </MusicApp>
    </div>
  </div>
</template>

<script>
import MusicApp from './components/musicApp.vue'
import artists from './components/data/artist'
import hotSongs from './components/data/hotSong'
import newSongs from './components/data/newSong'
import originalSongs from './components/data/originSong'

export default {
  components: {
    MusicApp
  },
  data() {
    return {
      artists,
      hotSongs,
      newSongs,
      originalSongs
    }
  }
}
</script>

 <style scoped>

.container {
  width: 100%;
  margin: 0 auto;
  padding: 20px;
}

.main-title {
  color: #333;
  font-size: 24px;

}
.artist-section {
  margin-bottom: 30px;
}
.artist-container{
  flex-direction: row;
  flex-wrap: nowrap; 
  display: flex;
  justify-content:space-between;
  align-items: center;
  width: 100%;
}


.rankings {
  flex-direction: row;
  flex-wrap: nowrap; 
  display: flex;
  justify-content:space-between;
  align-items: center;
  width: 100%;
}

.artist-image {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
}

.artist-name {
  margin: 0;
  color: #333;
  font-size: 16px;
} 


</style> 